'use strict';
/**
 * Created by QianQi on 2017/9/1.
 */
$(function(){
    var oHideParams = $.getHideParams();// <body> 下隐藏域键值对，name 为键
    var oUrlParams = $.getUrlParams();// url 附加参数键值对
    var URLS = {
        d_grid: 'demo_nopage.json'// 后台数据源
    };
    var DATA = {// 静态数据
        grid: [
            {"id": "zd000", "name": "当前页第 0 条", "txt": "飞行列车时速4000公里 它的美国竞品造得如何？"},
            {"id": "zd001", "name": "当前页第 1 条", "txt": "8月30日，在武汉举办的第三届中国（国际）商业航天高峰论坛上，中国航天科工集团透露的“超高速飞行列车”引爆网络。"},
            {"id": "zd002", "name": "当前页第 2 条", "txt": "这一最高时速4000公里的飞行列车，在国外有何“竞品”？"},
            {"id": "zd003", "name": "当前页第 3 条", "txt": "这些“对手”处在什么阶段？"},
            {"id": "zd004", "name": "当前页第 4 条", "txt": "它们的优势又在哪里？"},
            {"id": "zd005", "name": "当前页第 5 条", "txt": "第一步：研制出最大运行时速1000公里的列车，建设区域性城际飞行列车交通网；"}
        ]
    };

    var oGridApi;// 列表 api
    // 顶部按钮点击事件
    var fTbtnsClick = function(){
        var jqThis = $(this);
        switch(jqThis.attr('data-type')){
            case 'toStatic':
                oGridApi.fReset({// 改为静态数据
                    data: DATA.grid
                });
                break;
            case 'data':
                console.log('全部数据:', oGridApi.getData());// 全部数据
                break;
            case 'curData':
                console.log('当前显示数据:', oGridApi.getCurData());// 当前显示数据
                break;
            case 'checked':
                console.log('选中的数据:', oGridApi.getCheckedRows());// 选中的数据
                break;
            //case 'destroy':
            //    oGridApi.destroy();// 销毁
            //    break;
        }
    };
    // 操作列绘制
    var fGridCtrlRender = function(val, row, i, grid){
        return '<button class="btn gbtn" type="button" data-type="btn0">btn0</button>' +
            '<button class="btn gbtn" type="button" data-type="btn1">btn1</button>';
    };
    // 操作列点击事件
    var fGridCtrlClick = function(e, val, row, i){
        if(!oGridApi) return;
        switch($(e.target).attr('data-type')){
            case 'btn0':
                alert('btn0: ' + row.name);
                break;
            case 'btn1':
                alert('btn1: ' + row.name);
                break;
        }
    };
    // 列表数据请求
    var fRequestGrid = function(args){
        oGridApi.fReset({
            url: URLS.d_grid,
            args: args
        });
    };
    /** ============== **/
    $('.js-tbtns').on('click', 'button', fTbtnsClick);// 顶部按钮点击事件
    oGridApi = $('.js-grid').initGrid({
        //staticSize: false,// 设为 false 时，组件内部将根据定义智能计算列宽
        cols: [// 若显示序号或多选框，则 width 必须为具体的值，而非百分比，并应留一列不定义 width，以使其自适应
            {field: 'name', title: '名称', width: '120px'},
            {type: 'chk', field: 'chk', width: '60px'},
            {field: 'txt', title: '文本', showTip: true},
            {name: 'ctrl', title: '操作', width: '140px', align: 'center', render: fGridCtrlRender}
        ],
        filterEl: $('.js-query'),
        filter: {
            fields: 'txt'
        },
        //singleChk:true,
        callback: {
            cell: {
                ctrl: {
                    click: fGridCtrlClick
                }
            }
        }
    });
    fRequestGrid();
});